<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 她与月亮的约定</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#A06CD5',
                        'primary-light': '#F0EAF6',
                        secondary: '#6CD5A0',
                        'text-primary': '#1A0D28',
                        'text-secondary': '#5A5165',
                        'text-tertiary': '#9D96A5',
                        'bg-page': '#F7F5F9',
                        'border-color': '#E8E2EE',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #F7F5F9;
            color: #1A0D28;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .status-card {
            background: linear-gradient(135deg, #A06CD5, #B48EE0);
        }
        
        .calendar-day {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .period-day {
            background-color: #F0EAF6;
            color: #A06CD5;
        }
        
        .today {
            background-color: #6CD5A0;
            color: #1A0D28;
            font-weight: 700;
        }
        
        .ovulation-day {
            border: 2px solid #A06CD5;
        }
        
        .bottom-nav {
            box-shadow: 0 -1px 10px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-5 py-3 bg-white">
        <span class="text-lg font-medium text-text-primary">今天</span>
        <div class="flex items-center space-x-2">
            <svg class="w-5 h-5 text-text-secondary" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="flex-1 overflow-auto px-4 pb-20">
        <!-- 周期状态卡片 -->
        <div class="status-card rounded-2xl p-6 mt-4 text-center text-white shadow-lg">
            <h3 class="text-sm font-normal opacity-90 mb-1">距离下次月经</h3>
            <div class="text-3xl font-bold mb-1">22 <span class="text-base font-medium">天</span></div>
            <p class="text-xs opacity-90">今天是经期第3天，预计排卵日 7月22日</p>
        </div>

        <!-- 日历卡片 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm">
            <div class="flex justify-between items-center mb-4">
                <a href="#" class="text-primary text-sm">‹ 上月</a>
                <h4 class="text-base font-medium">2025年 7月</h4>
                <a href="#" class="text-primary text-sm">下月 ›</a>
            </div>
            
            <!-- 日历网格 -->
            <div class="grid grid-cols-7 gap-1 text-center">
                <!-- 星期标题 -->
                <div class="text-xs font-medium text-text-secondary">日</div>
                <div class="text-xs text-text-secondary">一</div>
                <div class="text-xs text-text-secondary">二</div>
                <div class="text-xs text-text-secondary">三</div>
                <div class="text-xs text-text-secondary">四</div>
                <div class="text-xs text-text-secondary">五</div>
                <div class="text-xs font-medium text-text-secondary">六</div>
                
                <!-- 日期 -->
                <div></div><div></div>
                <div class="calendar-day text-xs">1</div>
                <div class="calendar-day text-xs">2</div>
                <div class="calendar-day text-xs">3</div>
                <div class="calendar-day text-xs">4</div>
                <div class="calendar-day text-xs">5</div>
                
                <div class="calendar-day text-xs">6</div>
                <div class="calendar-day text-xs">7</div>
                <div class="calendar-day period-day text-xs">8</div>
                <div class="calendar-day period-day text-xs">9</div>
                <div class="calendar-day period-day today text-xs">10</div>
                <div class="calendar-day period-day text-xs">11</div>
                <div class="calendar-day period-day text-xs">12</div>
                
                <div class="calendar-day text-xs">13</div>
                <div class="calendar-day text-xs">14</div>
                <div class="calendar-day text-xs">15</div>
                <div class="calendar-day text-xs">16</div>
                <div class="calendar-day text-xs">17</div>
                <div class="calendar-day text-xs">18</div>
                <div class="calendar-day text-xs">19</div>
                
                <div class="calendar-day text-xs">20</div>
                <div class="calendar-day text-xs">21</div>
                <div class="calendar-day ovulation-day text-xs">22</div>
                <div class="calendar-day text-xs">23</div>
                <div class="calendar-day text-xs">24</div>
                <div class="calendar-day text-xs">25</div>
                <div class="calendar-day text-xs">26</div>
                
                <div class="calendar-day text-xs">27</div>
                <div class="calendar-day text-xs">28</div>
                <div class="calendar-day text-xs">29</div>
                <div class="calendar-day text-xs">30</div>
                <div class="calendar-day text-xs">31</div>
            </div>
        </div>

        <!-- 今日状态卡片 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm">
            <div class="flex justify-between items-center mb-3">
                <h4 class="text-base font-medium">今日状态</h4>
                <a href="#" class="text-primary text-xs font-medium">编辑</a>
            </div>
            <div class="flex flex-wrap gap-2">
                <span class="bg-bg-page px-3 py-2 rounded-full text-sm text-text-secondary">🩸 中量</span>
                <span class="bg-bg-page px-3 py-2 rounded-full text-sm text-text-secondary">😩 腹痛</span>
                <span class="bg-bg-page px-3 py-2 rounded-full text-sm text-text-secondary">😴 嗜睡</span>
                <span class="bg-bg-page px-3 py-2 rounded-full text-sm text-text-secondary">😊 开心</span>
            </div>
        </div>

        <!-- 健康知识卡片 -->
        <div class="bg-white rounded-2xl p-4 mt-4 shadow-sm mb-4">
            <div class="flex justify-between items-center mb-3">
                <h4 class="text-base font-medium">健康知识</h4>
                <a href="#" class="text-primary text-xs font-medium">更多</a>
            </div>
            <p class="text-sm text-text-secondary">经期小贴士：多喝热水，注意保暖，避免剧烈运动哦。</p>
        </div>
    </div>

    <!-- 悬浮按钮 -->
    <button class="fixed right-5 bottom-20 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg z-10">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
        </svg>
    </button>

    <!-- 底部导航栏 -->
    <div class="bottom-nav fixed bottom-0 left-0 right-0 bg-white border-t border-border-color py-2 px-6">
        <div class="flex justify-around">
            <a href="#" class="flex flex-col items-center text-primary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                </svg>
                <span class="text-xs mt-1">记录</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
                </svg>
                <span class="text-xs mt-1">知识</span>
            </a>
            <a href="#" class="flex flex-col items-center text-text-tertiary">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>
</body>
</html> 